<template>
  <div class="chat-room">
    <div class="online-member">聊天室</div>
    <div class="main">
      <div v-for="(item,index) in msgArr" :key="index">
        <!-- 左侧消息 -->
        <div :class="{'left-msg': item.col==1 ,'right-msg': item.col==2,'center-msg': item.col==0} ">
            <div  class="avatar" v-show="item.col == 1 || 2">
                <el-avatar :src="item.profile"></el-avatar>
                <div class="username">{{ item.username }}</div>
            </div>
            <div class="msg">{{ item.msg }}
                <div class="time">{{ item.time }}</div>
            </div>
            
        </div>
      </div>
    </div>
    <div class="foot">
      <el-input v-model="msgInput" placeholder="请输入内容"></el-input>
      <el-button class="send" type="info" @click="send">发送</el-button>
    </div>
  </div>
</template>
  <script>
export default {
  name: "myChatRoom",
  data() {
    return {
      a:{

      },
      msgInput: "",
      member:0,
      msgArr: [
        // 1是左边2是右边0是中间
        {   
            col:1,
            id: 49,
            username: 'root',
            profile: 'http://klcxyc.om:10018/avatarImgs/1675495762739.png',
            msg:"请问有没有会前端的人",
            time:'2023年4月25日 15:00:00'
        }
       
      ]
    };
  },
  mounted() {
    this.getBroadcastMsg();
    // 加入群聊
    this.join();
    this.welcome();
    this.quit();
  },
  methods: {
    // 加入群聊
    join() {
      this.socket.emit("join", JSON.parse(localStorage.getItem("userInfo")));
    },
    // 欢迎加入
    welcome() {
      this.socket.on("welcome", (data, member) => {
        console.log('有人加入进来的信息',data, member);
        this.msgArr.push({
            col:0,
            msg:'欢迎'+data.username+'进入聊天室',
            profile:data.profile
        })
        this.member = member
      });
    },
    // 接收用户退出广播
    quit(){
        this.socket.on("quit", (userInfo, member) => {
            console.log(userInfo, member, '离开了');
        this.msgArr.push({
            col:0,
            msg:userInfo.name+'退出聊天室',
            profile:userInfo.profile
        })
        this.member--
      });
    },
    send() {
      // 获取本地用户信息
      let userInfo = JSON.parse(localStorage.getItem('userInfo'))
      // 判断输入框规则
      // 自己这边发送
      this.msgArr.push({
        col:2,
        msg:this.msgInput,
        id:userInfo.id,
        username:userInfo.username,
        profile:userInfo.profile,
        time:this.getTimes()
      });
    //   广播信息发送
      this.socket.emit("msg",{
        col:1,
        msg:this.msgInput,
        id:userInfo.id,
        username:userInfo.username,
        profile:userInfo.profile,
        time:this.getTimes()
      });
      this.msgInput = '' //清空
    },
    // 接收广播信息
    getBroadcastMsg() {
      this.socket.on("broadcastMsg", data => {
        console.log(data);
        this.msgArr.push(data);
        
      });
    },
    
    getTimes(){
           var time = new Date();
           var year = time.getFullYear();//年
           var month = time.getMonth()+1;//月
           var mark = time.getDate();//日
           var day = time.getDay();//星期
           var hour = time.getHours();//时
            //    正则表达式（如果小时是一个数就在前面加个零）
           hour = hour < 10 ? '0' + hour : hour;
           var minutes = time.getMinutes();//分
           minutes = minutes < 10 ? '0' + minutes : minutes;
           var seconds = time.getSeconds();//秒
           seconds = seconds < 10 ? '0' + seconds : seconds;
           return(year + '年' + month + '月' + mark + '日 ' + hour + ':' + minutes + ':' +seconds);
        }
  }
};
</script>
  <style lang="less" scoped>
.chat-room {
    .online-member{
        width: 50%;
        text-align: center;
        background-color: rgb(126, 125, 122);
        margin:  0 auto;
        border-radius: 20px;
    }
  .main {
    height: 400px;
    width: 100%;
    overflow-y:scroll;
    .left-msg {
        display: flex;
        width: 38%;
        margin-bottom: 30px;
        padding: 20px;
        .msg{
            width: 100%;
            margin-left: 10px;
            font-size: 24px;
            background-color: rgb(8, 97, 97);
            padding: 10px;
            border-radius: 10px;
        }
        .time{
            font-size: 18px;
            margin-top: 10px;
        }
        .username{
            font-size: 18px;
        }
    }
    .right-msg {
        justify-content:flex-end;
        text-align: left;
        margin-bottom: 30px;
        margin-left: 62%;
        padding: 20px;
        display: flex;
        flex-direction:row-reverse;
        .msg{
            width: 100%;
            margin-right: 10px;
            font-size: 24px;
            background-color: rgb(177, 191, 17);
            padding: 10px;
            border-radius: 10px;
        }
        .time{
            font-size: 18px;
            margin-top: 10px;
        }
        .username{
            font-size:18px;
        }
    }
    .center-msg{
        display: flex;
        text-align: center;
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 10px;
        background-color:rgba(144, 151, 69, 0.3) ;
        margin: 0% auto;
        border-radius: 10px;
        width: 300px;
        height: 40px;
        line-height: 40px;
    }
    .send{
        width: 100% !important;
    }
  }
}
</style>